<template>
  <view style="padding: 20rpx; background-color: #f9f7ff; min-height: 100vh;">
    <!-- 紫色主题登录卡片 -->
    <view class="box" style="padding: 60rpx 30rpx; background-color: #fff; border-radius: 20rpx; box-shadow: 0 4rpx 20rpx rgba(123, 97, 255, 0.1); margin-top: 80rpx;">
      <!-- 自习室Logo/标题区 -->
      <view style="text-align: center; margin-bottom: 60rpx;">
        <uni-icons type="book" size="60rpx" color="#7b61ff" style="margin-bottom: 20rpx;"></uni-icons>
        <view style="font-size: 40rpx; font-weight: 500; color: #5d46c3;">你的自习室 - 登录</view>
        <view style="font-size: 24rpx; color: #9a89e0; margin-top: 10rpx;">专注学习，从这里开始</view>
      </view>

      <!-- 表单区域 -->
      <view style="margin: 20rpx 0 40rpx;">
        <uni-forms ref="formRef" :modelValue="form" :rules="rules" validateTrigger="blur">
          <!-- 账号输入项 -->
          <uni-forms-item name="username" required label="自习室账号" label-width="180rpx">
            <uni-easyinput
                prefixIcon="person"
                v-model="form.username"
                placeholder="请输入你的自习室账号"
                style="border-radius: 10rpx; border-color: #e0d9f7;"
            />
          </uni-forms-item>

          <!-- 密码输入项 -->
          <uni-forms-item name="password" required label="账号密码" label-width="180rpx">
            <uni-easyinput
                type="password"
                prefixIcon="locked"
                v-model="form.password"
                placeholder="请输入你的账号密码"
                style="border-radius: 10rpx; border-color: #e0d9f7;"
            />
          </uni-forms-item>

          <!-- 登录按钮 -->
          <uni-forms-item>
            <button
                @click="login"
                type="primary"
                style="width: 100%; height: 70rpx; line-height: 70rpx; background-color: #7b61ff; border-color: #7b61ff; border-radius: 10rpx; font-size: 28rpx;"
            >
              进入自习室
            </button>
          </uni-forms-item>
        </uni-forms>
      </view>

      <!-- 注册引导区 -->
      <view style="text-align: center; font-size: 24rpx; color: #666;">
        还没有自习室账号？
        <navigator
            url="/pages/register/register"
            style="display: inline; margin-left: 5rpx; color: #7b61ff; font-weight: 500;"
        >
          立即注册
        </navigator>
      </view>

      <!-- 自习室小提示 -->
      <view style="text-align: center; font-size: 20rpx; color: #9a89e0; margin-top: 40rpx;">
        提示：登录后可预约座位、查看学习数据
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据：默认角色为普通用户
      form: {
        username: '',
        password: '',
        role: 'USER'
      },
      // 表单验证规则
      rules: {
        username: {
          rules: [
            { required: true, errorMessage: '请输入自习室账号' }
          ]
        },
        password: {
          rules: [
            { required: true, errorMessage: '请输入账号密码' }
          ]
        }
      }
    }
  },
  methods: {
    login() {
      this.$refs.formRef.validate().then(res => {
        // 调用登录接口
        this.$request.post('/login', this.form).then(res => {
          if (res.code === '200') {  // 登录成功
            // 存储用户信息
            uni.setStorageSync('xm-user', res.data)
            // 提示文案贴合场景
            uni.showToast({
              icon: 'success',
              title: '登录成功'
            })
            // 延迟跳转至首页
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }, 500)
          } else {
            // 错误提示
            uni.showToast({
              icon: 'none',
              title: res.msg || '登录失败，请检查账号密码'
            })
          }
        }).catch(err => {
          // 网络错误提示
          uni.showToast({
            icon: 'none',
            title: '网络异常，无法连接自习室服务器'
          })
        })
      }).catch(err => {
        console.log('表单验证失败：', err);
      })
    }
  }
}
</script>

<style scoped>
/* 卡片悬停效果 */
.box {
  transition: all 0.3s ease;
}
.box:hover {
  box-shadow: 0 8rpx 30rpx rgba(123, 97, 255, 0.15);
}

/* 输入框焦点样式 */
::v-deep .uni-easyinput__input:focus {
  border-color: #7b61ff !important;
  box-shadow: 0 0 0 2rpx rgba(123, 97, 255, 0.2) !important;
}

/* 按钮悬停效果 */
::v-deep button[type="primary"]:hover {
  background-color: #6a54e0 !important;
  border-color: #6a54e0 !important;
}
</style>
